<template>
<div class="upload-image">
  <div class="image-title">效果图</div>
  <div span="8" class="left" @mousewheel.prevent="rollImg">
      <img :src="afterImg" alt="" class="img" ref="imgDiv" @mousedown="move" />
      <div class="show-big-image" @click="checkBigImg(afterImg)"> <i class="iconfont icon-quanping"></i></div>
  </div>
  <CheckBig @hidden='hidden' :bigImg='bigImg' v-if="showBigimage" ref="showBig" />
</div>
</template>

<script>
import CheckBig from './checkBigImage'
export default {
  components:{ CheckBig },
  props:['afterImg' ,'sliderHeader'],
  data(){
    return{
      sacle:100,
      showBigimage:false,
      bigImg:[]
    }
  },
  created(){
  },
  methods:{
    checkBigImg(url){
        this.bigImg = [url]
        this.showBigimage = true
    },
    hidden(){
      this.showBigimage = false
    },
    // 拖动图片
    move(e) {
      e.preventDefault();
      // 获取元素
      var left = document.querySelector(".left");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
     
      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
        let imgWidth = Math.round(img.getBoundingClientRect().width)
        let imgHeight = Math.round(img.getBoundingClientRect().height)
        let outWidth = Math.round(left.getBoundingClientRect().width)
        let outHeight = Math.round(left.getBoundingClientRect().height)

        // console.log(imgHeight,imgWidth,'height,width')

        if(imgWidth < outWidth && imgHeight < outHeight){
          if(parseInt(img.style.left) < imgWidth/2){
            img.style.left = imgWidth / 2 + 'px'
          }
          if(parseInt(img.style.top) <imgHeight / 2){
            img.style.top = imgHeight / 2 + 'px'
          }
          if(parseInt(img.style.left) - outWidth / 2  >  (outWidth - imgWidth) /2){
            img.style.left = outWidth / 2 + (outWidth / 2 - imgWidth / 2) + 'px'
          }

          if(parseInt(img.style.top) - outHeight / 2  >  (outHeight - imgHeight) /2){
            img.style.top = outHeight / 2 + (outHeight / 2 - imgHeight / 2) + 'px'
          }
        }
        // 如果图片的宽度小于 外层的宽度 并且图片的高大于 外层的高度
        if(imgWidth < outWidth && imgHeight >  outHeight) {
          
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if(left < imgWidth / 2 ){
            img.style.left = imgWidth / 2 + 'px'
          }
          if(left > outWidth - imgWidth + imgWidth /2 ){
            img.style.left = outWidth - imgWidth + imgWidth / 2 + 'px'
          }
          if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          if( top < outHeight / 2){
            if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
              img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
            }
          }

        }
        // 如果图片的宽度 大于 外层的宽度 并且图片的高 小于 外层的高度
        if(imgWidth > outWidth && imgHeight <  outHeight) {
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if(top < imgHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          if(top > outHeight - imgHeight + imgHeight /2 ){
            img.style.top = outHeight - imgHeight + imgHeight / 2 + 'px'
          }

          if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
            img.style.left = imgWidth / 2 + 'px'
          }

          if( left < outWidth / 2){
            if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
              img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
            }
          }

        }


        //  如果 图片的宽度 和高度 都大于外层的高度和宽度
        if(imgWidth > outWidth && imgHeight > outHeight){

          if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
            img.style.left =   imgWidth / 2 + 'px'
          }
          if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if( left < outWidth / 2){
            if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
              img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
            }
          }

          if( top < outHeight / 2){
            if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
              img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
            }
          }
        }
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function() {
        left.removeEventListener("mousemove", move);
        

      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function() {
        left.removeEventListener("mousemove", move);
      });
    },
    // 缩放图片
    rollImg() {
      this.sacle = this.sliderHeader * 5
      this.sacle += event.wheelDelta / 12;
      this.$refs.imgDiv.style.width =this.sacle + '%'
      

      this.rollChangePosition()
      this.$emit('setZoom', this.sacle)
      return false
 
    },
    rollChangePosition(){
      var left = document.querySelector(".left");
      var img = document.querySelector(".img");
      let imgWidth = Math.round(img.getBoundingClientRect().width)
      let imgHeight = Math.round(img.getBoundingClientRect().height)
      let outWidth = Math.round(left.getBoundingClientRect().width)
      let outHeight = Math.round(left.getBoundingClientRect().height)

      if(imgWidth < outWidth && imgHeight < outHeight){
          if(parseInt(img.style.left) < imgWidth/2){
            img.style.left = imgWidth / 2 + 'px'
          }
          if(parseInt(img.style.top) <imgHeight / 2){
            img.style.top = imgHeight / 2 + 'px'
          }
          if(parseInt(img.style.left) - outWidth / 2  >  (outWidth - imgWidth) /2){
            img.style.left = outWidth / 2 + (outWidth / 2 - imgWidth / 2) + 'px'
          }

          if(parseInt(img.style.top) - outHeight / 2  >  (outHeight - imgHeight) /2){
            img.style.top = outHeight / 2 + (outHeight / 2 - imgHeight / 2) + 'px'
          }
        }
        // 如果图片的宽度小于 外层的宽度 并且图片的高大于 外层的高度
        if(imgWidth < outWidth && imgHeight >  outHeight) {
          
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if(left < imgWidth / 2 ){
            img.style.left = imgWidth / 2 + 'px'
          }
          if(left > outWidth - imgWidth + imgWidth /2 ){
            img.style.left = outWidth - imgWidth + imgWidth / 2 + 'px'
          }
          if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          if( top < outHeight / 2){
            if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
              img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
            }
          }

        }
        // 如果图片的宽度 大于 外层的宽度 并且图片的高 小于 外层的高度
        if(imgWidth > outWidth && imgHeight <  outHeight) {
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if(top < imgHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          if(top > outHeight - imgHeight + imgHeight /2 ){
            img.style.top = outHeight - imgHeight + imgHeight / 2 + 'px'
          }

          if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
            img.style.left = imgWidth / 2 + 'px'
          }

          if( left < outWidth / 2){
            if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
              img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
            }
          }

        }


        //  如果 图片的宽度 和高度 都大于外层的高度和宽度
        if(imgWidth > outWidth && imgHeight > outHeight){

          if( (imgWidth - outWidth) / 2 < parseInt(img.style.left) - outWidth / 2 ){
            img.style.left =   imgWidth / 2 + 'px'
          }
          if( (imgHeight - outHeight) / 2 < parseInt(img.style.top) - outHeight / 2 ){
            img.style.top = imgHeight / 2 + 'px'
          }
          let left = parseInt(img.style.left)
          let top = parseInt(img.style.top)
          if( left < outWidth / 2){
            if( outWidth / 2 > left + (imgWidth - outWidth ) / 2  ){
              img.style.left = outWidth / 2 - (imgWidth - outWidth ) / 2 + 'px'
            }
          }

          if( top < outHeight / 2){
            if( outHeight / 2 > top + (imgHeight - outHeight ) / 2  ){
              img.style.top = outHeight / 2 - (imgHeight - outHeight ) / 2 + 'px'
            }
          }
        }

    },
    changeImgSize(val){
      this.sacle = val * 2
      this.$refs.imgDiv.style.width = this.sacle + '%'
      // this.$refs.imgDiv.style.height = this.sacle + '%'
    },

  },
  mounted(){
  },
}
</script>

<style lang='scss' scoped>
.show-big-image{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.image-title{
  height: 50px;
  margin: 0 auto;
  margin-bottom: 10px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  width: 210px;
  border-radius: 0 0 10px 10px;
  background-color: #94d1ca;
}
.left {
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 90%;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid #ccc;
}
.img {  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  cursor: move;
}

.upload-image{
  width: 100%;
  background-color: #fff;
  height: 100%;
}
</style>